<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>烟花</title>
        <style media="screen">
            *{
                margin: 0;
                padding: 0;
            }
            #box{
                width:800px;
                height:600px;
                position: relative;
                margin: 100px auto;
                background:#000000;
                border:2px solid red;
                overflow: hidden;
            }
            .ball{
                width: 10px;
                height: 10px;
                border-radius: 50%;
                position: absolute;
                bottom: 0;
            }
        </style>
    </head>
    <body>
        <div id="box"></div>
    </body>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript">
        // 动画  :
        // animate(); 以结果为导向进行 jQuery ;
        // 选择元素 : $(选择符)
        // $("#box").animate({
        //     width : 100,
        //     height : 100
        // },5000)

        // OOA : 
        // 1. 绑定事件;
        // 2. 事件触发函数 : 
        //    1. 创建一个烟花主体;
        //    2. 运动到鼠标点击的位置;
        //    3. 创建一大堆烟花爆炸效果;
        //    4. 按照三角函数坐标运动;

        // OOD : 
        // function FireWork(){

        // }
        // FireWork.prototype.bindEvent = function(){

        // }
        // FireWork.prototype.createFireWork = function(){

        // }
        // FireWork.prototype.boom = function(){

        // }

        //烟花
        function FireWork(){
            this.container =document.querySelectorAll('#box')
            this.bindEvent()
        }
            //获取元素
         
            //初始化
       
        //绑定事件
        FireWork.prototype.bindEvent=function(){
            var self =this;

            self.container.onclick=function(evt){
                var e=evt||event
                var firework =self.creatfirework()
                firework.style.left=evt.offsetX+"px"
                $(firework).animate({
                    top:evt.offsetY
                },800,function(){
                    firework.remove()
                })
            }
        }
        FireWork.prototype.creatfirework=function(){
            var div =document.createElement("div")
            div.className="ball";
            div.style.backgroundColor = "#" + Math.round(parseInt("ffffff", 16) * Math.random()).toString(16).padStart( 6 , "0");
            this.container.appendchild(div);
            return div;
        }
            //获得this
            
            // 给容器绑定事件 ;
            // 主体烟花创建并运动到目标点; 
            
                //事件兼容
                
                //导入烟花
               
                // 让元素有一个可靠的起始点;
                
                // 运动;
                // 运动结束有一个回调函数;
               
        //创建烟花
        
            //  1. 创建一个div;
            //  2. div放在页面之中;
            
            //div类名
           
            //div随机颜色
           
            //div加入到box中
            
            //将div返回，使用div
            
        //爆炸
        FireWork.prototype.boom = function(){
            
        }
        //构造函数
       var firework1 =new Firework() 


    </script>
</html>
